<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
    <el-card>
      <ul class="card">
        <li class="title">
          订单管理
          <ul>
            <li>代偿订单 (列表:沙海清 <span class="green"> 可测;</span>
             详情:葛焱,<span class="green"> 可测;</span>)</li>
            <li>异常订单(沙海清90%,操作记录按钮接口未提供,其余<span class="green"> 可测;</span>)</li>
          </ul>
        </li>
        <li class="title">
          差错清算
          <ul>
            <li>代扣交易(沙海清,<span class="green"> 可测;</span>),代扣处理记录(沙海清,<span class="green"> 可测;</span>)</li>
            <li>代付交易(沙海清,<span class="green"> 可测;</span>),代付处理记录(沙海清,<span class="green"> 可测;</span>)</li>
            <li>清算报表(列表:高靖如,<span class="green"> 可测</span>);</li>
          </ul>
        </li>
        <li class="title">
          参数管理
          <ul>
            <li>参数配置(高靖如):<span class="green"> 可测;</span></li>
            <li>支持银行(列表页:葛焱<span class="green"> 可测;</span>)</li>
            <li>拆单配置(葛焱,后台id待改)</li>
          </ul>
        </li>
      </ul>
      
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size:22px;
    line-height: 24px;
  }
}
.el-card{
  font-size: 20px;
  .title{
    font-weight: bold;
    li{
      font-weight: 400;
      padding-left: 30px;
      line-height: 30px;
    }
  }
}
.green{
  color:#13ce66;
  font-weight: bold;
}
</style>
